Reactjs ♥ 基础 Hooks

useState

组件的状态管理

const [name, setName] = useState('')

// 懒加载初始化? 只在需要的时候执行
const [name, setName] = useState(
  () =>  window.localStorage.getItem('name') || ''
)

useEffect

页面副反应

// 在每次页面更新都触发
useEffect(() => {
  console.log('DOM updated')
})

// 只在页面第一次渲染的时候触发
// 适用于初始化 JSON 数据等
useEffect(() => {
  console.log('Only on Mounted')
}, [])

// 根据数据状态进行数据更新
useEffect(() => {
  console.log('name updated')
}, [name])

// 在页面退出时执行, 类似于 Vue3 中的 `onUnmounted`
useEffect(() => {
  return () => {
    // 这里填写推出后最后执行的副反应
  }
})

• 轻松学会 React 钩子：以 useEffect() 为例 - 阮一峰的网络日志
• useEffect使用指南_大灰狼的小绵羊哥哥的博客-CSDN博客_useeffect
• 关于 useEffect 重复调用以及依赖数组的问题? - SegmentFault 思否

useRef

获取 DOM 对象

// 因为在最开始的时候不加载 DOM, 需要配合 useEffect 使用
cosnt elemRef = useRef()

useEffect(() => {
  const elemNode = elemRef.current
  console.log(elemNode)
}, [])

React Hooks cheat sheet.pdf